<template>
	<!-- 店员审核 -->
	<view class="clerkExamine-main">
		<!-- 筛选 -->
		<view class="incomeDetail-filter">
			<uni-segmented-control :current="current" :values="items" style-type="text" @clickItem="onClickItem" />
		</view>

		<!-- 搜索 -->
		<view class="searchPage-input">
			<uni-search-bar
				radius="50"
				:value="searchValue"
				style="flex: 1"
				placeholder="请输入搜索内容"
				clearButton="always"
				cancelButton="none"
				@confirm="getSearch"
				@cancel="getSearch"
			/>
			<text class="searchPage-title" @click="getSearch">搜索</text>
		</view>

		<!-- 审核列表 -->
		<view class="clerkExamine-list" v-if="filterData().length > 0">
			<view class="clerkExamine-item" v-for="(item, index) in filterData()" :key="item.id">
				<view class="clerkExamine-item-time" v-if="item.status == 3">
					<view class="type">已拒绝</view>
				</view>
				<view class="clerkExamine-item-info">
					<view class="info-image">
						<image :src="imageUrls(item.user.avatar)" mode="widthFix" class="images"></image>
					</view>
					<view class="info-data">
						<view class="name">
							{{ item.user.nickname }}
						</view>
						<view class="iphone">
							{{ item.user.mobile }}
						</view>
					</view>
					<view class="info-type">
						{{ staffStatus(item.status) }}
					</view>
				</view>
				<view class="clerkExamine-item-btn" v-if="item.status == 2">
					<view class="btn backNone" @click="getstoreStaffRefuse(item.id)">拒绝</view>
					<view class="btn" @click="getstoreStaffPass(item.id)">通过</view>
				</view>
			</view>
		</view>

		<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
	</view>
</template>

<script>
import { storeStaffList, storeStaffPass, storeStaffRefuse } from '../../../api/flashManage/index.js';
import { imageUrl } from '../../../utils/tools.js';
export default {
	data() {
		return {
			current: 0,
			items: ['待审核', '已拒绝'],
			searchValue: '',
			storeType: '',
			staffList: []
		};
	},
	onLoad(option) {
		const { id } = option;
		if (id) {
			this.current = Number(id);
		}

		this.storeType = this.$store.state.storeType;
		this.getstoreStaffList();
	},
	methods: {
		getSearch() {
			this.getstoreStaffList();
		},

		// 店员列表
		async getstoreStaffList() {
			try {
				const queryData = {
					type: this.storeType
				};
				if (this.searchValue) {
					queryData.keyword = this.searchValue;
				}
				const resData = await storeStaffList(queryData);
				this.staffList = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 店员审核通过
		async getstoreStaffPass(id) {
			try {
				const resData = await storeStaffPass({
					type: this.storeType,
					id
				});
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				});
				setTimeout(() => {
					this.getstoreStaffList();
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		},

		// 店员审核拒绝
		async getstoreStaffRefuse(id) {
			try {
				const resData = await storeStaffRefuse({
					type: this.storeType,
					id
				});
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				});
				setTimeout(() => {
					this.getstoreStaffList();
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		},

		staffStatus(type) {
			const typeList = {
				0: '禁用',
				1: '启用',
				2: '待审核',
				3: '拒绝'
			};
			return typeList[type];
		},

		imageUrls(url) {
			return imageUrl(url);
		},

		onClickItem() {
			this.filterData();
		},

		filterData() {
			if (this.staffList.length > 0) {
				let staffList = this.staffList.filter((item) => {
					if (this.current == 0) {
						return item.status == '2';
					} else if (this.current == 1) {
						return item.status == '3';
					}
				});
				return staffList;
			} else {
				return [];
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>

<style scoped lang="scss">
.clerkExamine-main {
	.incomeDetail-filter {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
	}

	.searchPage-input {
		display: flex;
		align-items: center;
		height: 80rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
		.searchPage-title {
			margin-right: 20rpx;
			color: #444;
		}
	}

	.clerkExamine-list {
		box-sizing: border-box;
		padding: 20rpx;
		.clerkExamine-item {
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx;
			padding-bottom: 0px;
			border-radius: 24rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			.clerkExamine-item-time {
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				border-bottom: 1px #f3f3f3 solid;
				margin-bottom: 30rpx;
				.time {
					color: #999;
				}
				.type {
					color: red;
				}
			}

			.clerkExamine-item-info {
				display: flex;
				padding-bottom: 30rpx;
				.info-image {
					width: 140rpx;
					.images {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}

				.info-data {
					flex: 1;
					display: flex;
					flex-direction: column;
					height: 120rpx;
					justify-content: center;
					.name {
						font-size: 28rpx;
						font-weight: bold;
					}
					.iphone {
						margin: 10rpx 0;
						color: #999;
					}
				}
				.info-type {
					color: #2979ff;
					font-size: 26rpx;
				}
			}

			.clerkExamine-item-btn {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 100rpx;
				border-top: 1px #f3f3f3 solid;
				font-size: 26rpx;
				.btn {
					width: 180rpx;
					height: 55rpx;
					line-height: 55rpx;
					text-align: center;
					border-radius: 55rpx;
					background-color: #2979ff;
					margin-left: 30rpx;
					color: #fff;
				}

				.backNone {
					background-color: transparent;
					border: 1px #999 solid;
					color: #999;
				}
			}

			.clerkExamine-item-btn-left {
				display: flex;
				align-items: center;
				height: 100rpx;
				border-top: 1px #f3f3f3 solid;
			}
		}
	}
}
</style>
